<!--
 * @Author: your name
 * @Date: 2020-05-25 10:52:52
 * @LastEditTime: 2020-06-02 16:11:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mobile_project_0519\mobile_post\src\pages\register\register.vue
--> 
<template>
  <div class="register">
    <van-nav-bar
      title="注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-form @submit="onSubmit">
      <van-field
        v-model="registerForm.username"
        name="username"
        label="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="registerForm.password"
        type="password"
        name="password"
        label="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field 
        v-model="registerForm.email" 
        center
        clearable 
        label="邮箱"
        pattern:emailPattern
        :rules="[{ required: true, message: '请填写邮箱' }]"
        >
        <template #button>
          <van-button 
            size="small" 
            type="primary" 
            @click="sendCode"
            :disabled="isDisabled"
          >
          {{isDisabled ? num+'秒':'发送验证码'}}
          </van-button>
        </template>
      </van-field>
      <van-field 
        v-model="registerForm.tel" 
        type="tel" 
        label="手机号码"
        pattern:emailPattern 
        :rules="[{ required: true, message: '请填写手机号码' }]"
        />
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="registerForm.sex" direction="horizontal">
            <van-radio name="man">男</van-radio>
            <van-radio name="women">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field 
        label="邮箱验证码" 
        value 
        v-model="registerForm.code"
        :rules="[{ required: true, message: '请填写验证码' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import * as api from "@/request/api/register.js"
export default {
  data() {
    return {
      //注册表单对象
      registerForm: {
        username:"",
        password:"",
        email:"",
        tel:"",
        sex:"man",
        code:""
      }, 
      emailPattern:/[1-9]\d{7,10}@qq\.com/, //邮箱正则格式
      phonePattern:/^1[3-9]\d{9}$/g,  //手机号码正则格式
      isDisabled:false,  //是否禁用发送button
      num:5 //发送后倒计时
    };
  },
  methods: {
    // 获取注册页接口的发送验证码函数
    async API_sendCode(email){
      let result = {
        email
      }
      return await api.sendCode(result)
    },
    // 发送验证码
    async sendCode(){
      this.isDisabled = true
      let time = setInterval(() => {
        if(this.num > 0){
          this.num --
        }else{
          this.isDisabled = false
          clearInterval(time)
        }
      }, 1000);
      let res = await this.API_sendCode(this.registerForm.email)
      //console.log(res)
      if(res.data.code === 1000){
        this.$toast.success("发送成功！")
      }else{
        this.$toast.fail("发送失败,请检查邮箱格式！")
        this.isDisabled = false
      }
    },
    // 获取注册接口数据
    async API_register(name,pwd,email,tel,sex,code){
      let result = {
        name,
        pwd,
        email,
        tel,
        sex,
        code
      }
      return api.register(result)
    },

    // 返回上一页
    onClickLeft(){
      this.$router.go(-1)
    },
    // 提交表单
    async onSubmit() {
      let {username,password,email,tel,sex,code} = this.registerForm
      let res = await this.API_register(username,password,email,tel,sex,code) 
      if(res.data.code === 1000){
        this.$toast.success("注册成功")
        this.$router.push("/login")
      }else if(res.data.code === 1001){
        console.log(res.data.data)
      }
      else{
        this.$toast.fail("注册失败，请检查填写的个人信息！")
      }
    }
  }
};
</script>

<style>
</style>